<template>
  <view class="common-list">
    <slot name="list"></slot>
    <template v-if="status === 'nomore' && !list.length">
      <slot name="empty"></slot>
    </template>
    <template v-else>
      <u-loadmore margin-top="100" margin-bottom="100" :status="status" @loadmore="loadmore" />
    </template>
  </view>
</template>

<script>
  /**
	 * 列表
	 * onReachBottom() {
      uni.$emit('onReachBottom')
    },
		page: 1,
		list: [],
		status: 'loading',
	 * <common-list @load="getGoodsList" :list="list" :status="status">
				<template #list>
					// 列表内容
				</template>
				<template #empty>
					<empty></empty>
				</template>
			</common-list>
	 */
  export default {
    props: {
      list: {
        type: Array,
        default: () => [],
      },
      status: {
        type: String,
        default: 'loading',
      },
    },
    watch: {},
    data() {
      return {}
    },
    mounted() {
      uni.$on('onReachBottom', () => {
        this.loadmore()
      })
      uni.$on('onPullDownRefresh', () => {
        this.loadRefresh()
      })
    },
    destroyed() {
      uni.$off('onReachBottom')
      uni.$off('onPullDownRefresh')
    },
    methods: {
      loadmore() {
        if (this.status === 'loadmore') {
          this.$emit('load')
        }
      },
      loadRefresh() {
        this.$emit('refresh')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .common-list {
    .u-load-more-wrap {
      padding-bottom: 100rpx !important;
    }
  }
</style>
